<template>
    <div class="count">
        <div>
            <h5>当前求和为:{{ countState.sum }}</h5>
            <p>欢迎来到：{{ countState.school }},坐落于：{{ countState.address }}</p>
        </div>
        <div>
            <h3>当前求和为:{{ sum }}</h3>
            <p>欢迎来到：{{ school }},坐落于：{{ address }}</p>
        </div>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>


<script setup lang="ts" name="Page45">
import { reactive, ref, toRefs } from 'vue';
import { storeToRefs} from 'pinia'
/*
let obj = reactive({
    a:1,
    b:ref(2)
})
let x= ref(9)
console.log(obj.a)
console.log(obj.b) // reactive 里面定义的b是ref 包裹的  用的时候自动拆包
console.log(x.value) // 需要自己写value
*/

// 引入useCountStore
import { useCountStore } from '../../stores/count'
// 使用useCountStore，得到一个专门保存count相关的store
const countState = useCountStore();
// const { sum,school,address } = toRefs(countState) // 性能代价高
const { sum,school,address } = storeToRefs(countState) 
console.log(1)
console.log(storeToRefs(countState))
console.log('ss', countState)

let n = ref(1);// 用户选择的数字
function add() {
    // 第一种修改数据
    // countState.sum+=n.value

    // countState.sum+=n.value
    // countState.school="IT硅谷"
    // countState.address="北京"
    // 第二种修改数据
    
    countState.$patch({
        sum: (countState.sum + n.value),
        school: "IT硅谷",
        address: "北京"
    });
    
   // 第三种修改数据
    // countState.increment(n.value)

}
function minus() {
    countState.sum -= n.value
}
</script>


<style scoped>
.count {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

select,
button {
    margin: 0 5px;
    height: 40ppx;
    line-height: 18px;
}
</style>